@keyframes rotatee {
    100% {
        transform: rotate(360deg);
    }
}
@keyframes bouncee {
    0%, 100% {
        transform: scale(0.0);
    }
    50% {
        transform: scale(1.0);
    }
}

.common-loader {
    z-index: 10;
    position: absolute;
    width: 100%;
    height: 100%;
    .spinner {
        position: absolute;
        width: 40px;
        height: 40px;
        top: 50%;
        left: 50%;
        margin-left: -40px;
        margin-top: -40px;
        -webkit-animation: rotatee 2.0s infinite linear;
        animation: rotatee 2.0s infinite linear;
    }
    .dot1, .dot2 {
        width: 60%;
        height: 60%;
        display: inline-block;
        position: absolute;
        top: 0;
        border-radius: 100%;
        -webkit-animation: bouncee 2.0s infinite ease-in-out;
        animation: bouncee 2.0s infinite ease-in-out;
    }
    .dot2 {
        top: auto;
        bottom: 0;
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }
    .page-loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

.white-loader {
    background-color: rgba(0,0,0,.5);
    .dot1, .dot2 {
        background-color: #FFF;
    }
}

.theme-loader {
    background-color: #FFF;
    .dot1, .dot2 {
        background-color: $theme-color;
    }
}